<template>
  <td class="w-20 pl-8 first:rounded-tl-lg first:rounded-bl-lg">
    <div
      :class="{ 'acm-table__checkbox--checked': isCheckboxChecked }"
      class="w-5 h-5 border rounded-sm cursor-pointer select-none overflow-hidden acm-table__checkbox"
      @click="$emit('onClickCheckbox')"
    >
      <Transition name="fade">
        <div
          v-if="isCheckboxChecked"
          class="w-full h-full flex justify-center items-center bg-primary"
        >
          <CheckboxHook />
        </div>
      </Transition>
    </div>
  </td>
</template>

<script setup lang="ts">
import CheckboxHook from "./CheckboxHook.vue";

defineEmits<{
  onClickCheckbox: [];
}>();

defineProps<{
  isCheckboxChecked: boolean;
}>();
</script>

<style scoped>
.acm-table__checkbox {
  border-color: #86909c;
}
.acm-table__checkbox--checked,
.acm-table__checkbox:hover {
  border-color: #3f8cff;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
